<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!-- 父组件 -->
 <div id="app">
    <cpn @item-click="cpnClick"></cpn>
 </div>

<!-- 子组件 -->
<template id="cpn">
  <div>
    <button v-for="item in datas" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

     <script src="../js/vue.js"></script>
     <script>
       const cpn={
         template: '#cpn',
         data(){
           return {
             datas: [
               {id: 'aaa',name: '热门推荐'},
               {id: 'bbb',name: '手机销售'},
               {id: 'ccc',name: '图书销售'},
               {id: 'ddd',name: '电器销售'}
             ]
           }
         },
         methods:{
           btnClick(item){
             //子组件 发射一个事件出去  父组件需要接受这个事件  v-on 绑定 这个事件名
             this.$emit('item-click',item)
           }
         }
       }
       const app=new Vue({
         el: '#app',
         data: {
           message:'你好vue',
         },
         components: {
           cpn
         },
         methods:{
           cpnClick(item){
             console.log(JSON.stringify(item));
           }
         }
       })
     </script>
</body>
</html>